import React,{Component} from 'react';
import {Badge, Flex, Tabs, WhiteSpace} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import Fund_rank1 from "../Fund_rank/fund_rank1";
import Fund_rank2 from "../Fund_rank/fund_rank2";
import Fund_rank3 from "../Fund_rank/fund_rank3";
import Fund_rank4 from "../Fund_rank/fund_rank4";


export default class Fundrank_tab_top extends React.Component{

    render() {
        const tabs = [
            { title: '混合型' },
            { title: '股票型' },
            { title: '债券型' },
            { title: 'QDII型' },
        ];
        return (
            <div className="fund_ranks_box">
                <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                    <div className="fund_content" style={{height:'72vh'}}>
                        <ul className="fund_info_nav_list">
                            <li className="fund_info_nav_list1">基金名称</li>
                            <li className="fund_info_nav_list2">最新净值</li>
                            <li className="fund_info_nav_list3">近三月</li>
                        </ul>
                        <div className="f_r_listview"><Fund_rank2/></div>
                    </div>
                    <div className="fund_content" style={{height:'72vh'}}>
                        <ul className="fund_info_nav_list">
                            <li className="fund_info_nav_list1">基金名称</li>
                            <li className="fund_info_nav_list2">最新净值</li>
                            <li className="fund_info_nav_list3">近三月</li>
                        </ul>
                        <div className="f_r_listview"><Fund_rank1/></div>
                    </div>
                    <div className="fund_content" style={{height:'72vh'}}>
                        <ul className="fund_info_nav_list">
                            <li className="fund_info_nav_list1">基金名称</li>
                            <li className="fund_info_nav_list2">最新净值</li>
                            <li className="fund_info_nav_list3">近三月</li>
                        </ul>
                        <div className="f_r_listview"><Fund_rank3/></div>
                    </div>
                    <div className="fund_content" style={{height:'72vh'}}>
                        <ul className="fund_info_nav_list">
                            <li className="fund_info_nav_list1">基金名称</li>
                            <li className="fund_info_nav_list2">最新净值</li>
                            <li className="fund_info_nav_list3">近三月</li>
                        </ul>
                        <div className="f_r_listview"><Fund_rank4/></div>
                    </div>
                </Tabs>
                <WhiteSpace />
            </div>
        );
    };
};